<template>
  <div class="good_body">
    <h1>商品</h1>
    <div class="seach_box">
      <a-form :model="reqGoodsList" layout="inline">
        <a-form-item field="name" label="商品名称">
          <a-input v-model="reqGoodsList.name" placeholder="请输入商品名称" />
        </a-form-item>
        <a-form-item field="cat_id" label="商品分类">
          <a-select v-model="reqGoodsList.cat_id" placeholder="请选择商品分类">
            <a-option
              v-for="item in categorySelectList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-option
            >
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button @click="searchFn">搜索</a-button>
          <a-button style="margin-left: 10px" @click="resetFn">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="good_table">
      <a-button
        class="add_btn"
        type="primary"
        status="success"
        @click="goodModalRef.openModal('add')"
      >
        新增
      </a-button>
      <a-table
        :columns="columns"
        :data="goodsList"
        :pagination="{
          total: paginationInfo.total,
          pageSize: paginationInfo.page_size,
          current: paginationInfo.current,
        }"
        @pageChange="pageChangeFn"
      >
        <template #img_url="{ record }">
          <img :src="base + record.img_url" />
        </template>
        <template #options="{ record }">
          <a-popconfirm
            content="你确定要删除该商品吗？"
            type="error"
            @ok="deleteGoodFn(record.id)"
          >
            <a-button type="primary" status="danger"> 删除 </a-button>
          </a-popconfirm>
          <a-button
            type="primary"
            status="warning"
            @click="goodModalRef.openModal('edit', record.id)"
            style="margin-left: 15px"
          >
            编辑
          </a-button>
        </template>
        <template #price="{ record }">
          <div>{{ record.price * 0.01 }}</div>
        </template>
      </a-table>
    </div>
    <GoodModal
      ref="goodModalRef"
      @resetFn="resetFn"
      :categorySelectList="categorySelectList"
    />
  </div>
</template>

<script setup lang="ts">
  import {
    getGoodsListAPI,
    type ReqGoodsList,
    delGoodAPI,
    categorySelectListAPI,
    type CategorySelectList,
  } from '@/api/goods';
  import { Message } from '@arco-design/web-vue';
  import { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { ref, reactive, onMounted } from 'vue';
  import GoodModal from './components/goodModal.vue';

  const base = import.meta.env.VITE_BASE_URLS;
  onMounted(() => {
    getGoodsListFn();
    getCategorySelectList();
  });

  const goodModalRef = ref();

  const columns: TableColumnData[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: 'PID',
      dataIndex: 'pid',
      align: 'center',
    },
    {
      title: 'name',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: 'img_url',
      dataIndex: 'img_url',
      slotName: 'img_url',
      align: 'center',
    },
    {
      title: '价格',
      dataIndex: 'price',
      slotName: 'price',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
    },
    {
      title: '',
      dataIndex: 'options',
      slotName: 'options',
      align: 'center',
    },
  ];

  const reqGoodsList = reactive<ReqGoodsList>({
    page: 1,
    page_size: 10,
    cat_id: null,
    name: '',
  });

  const goodsList = ref([]);
  // 分页数据
  const paginationInfo = reactive<{
    total: number;
    current: number;
    page_size: number;
  }>({
    total: 0,
    current: 0,
    page_size: 10,
  });
  const getGoodsListFn = async () => {
    try {
      const result = (await getGoodsListAPI(reqGoodsList)).data;
      goodsList.value = result.data.data;
      paginationInfo.total = result.data.total;
      paginationInfo.current = result.data.current;
    } catch (error) {
      Message.error('获取商品列表失败');
    }
  };
  // 分页
  const pageChangeFn = async (e: number) => {
    reqGoodsList.page = e;
    getGoodsListFn();
  };

  // 重置列表状态
  const resetFn = () => {
    reqGoodsList.page = 1;
    reqGoodsList.cat_id = null;
    reqGoodsList.name = '';
    getGoodsListFn();
  };
  // 搜索
  const searchFn = () => {
    reqGoodsList.page = 1;
    getGoodsListFn();
  };
  const deleteGoodFn = async (id: number) => {
    try {
      const result = await delGoodAPI(id);
      Message.success('删除商品成功');
      resetFn();
    } catch (error) {
      Message.error('删除商品失败请重新尝试');
    }
  };

  // 商品分类的下拉列表
  const reqCategorySelectList = reactive<CategorySelectList>({
    page: 1,
    page_size: 999,
    pid: null,
    name: '',
  });
  const categorySelectList = ref<
    {
      id: number;
      pid: number;
      name: string;
    }[]
  >([]);
  const getCategorySelectList = async () => {
    try {
      const result = (await categorySelectListAPI(reqCategorySelectList)).data;
      categorySelectList.value = result.data.data;
    } catch (error) {
      Message.error('获取商品分类下拉列表失败');
    }
  };
</script>

<style lang="scss" scoped>
  .good_body {
    padding: 10px;

    .seach_box {
      background-color: #fff;
      margin-bottom: 10px;
      border-radius: 15px;
      padding: 10px;
    }

    .good_table {
      padding: 10px;
      background: #fff;
      border-radius: 10px;

      .add_btn {
        margin-bottom: 20px;
      }
    }
  }
</style>
